<template>
  <div class="common-layout">
    
    <el-container>
         
      <el-aside width="350px" height="100% " >
        
 <el-col :span="12">
     <div class="e">
        <img src="..\assets\logo.png" alt=""></div>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
          :unique-opened="true"   
        @open="handleOpen"
        @close="handleClose"
      >
      <div class="a">
      <el-menu-item index="5">
          <el-icon><Odometer /></el-icon>
        <router-link to="/yibiaopan">仪表盘</router-link>
        </el-menu-item></div>
      <div class="a">
        <el-sub-menu index="1">
          <template #title>
            <span><el-icon><Menu /></el-icon>常用设置</span>
          </template>
          
            <el-menu-item index="1-1"><router-link to="/jiaoshi">教师管理</router-link></el-menu-item>
            <el-menu-item index="1-2"><router-link to="/xuesheng">学生管理</router-link></el-menu-item>
            <el-menu-item index="1-3"><router-link to="/gonggao">公告管理</router-link></el-menu-item>
            <el-menu-item index="1-4"><router-link to="/xitong">系统配置</router-link></el-menu-item>
            <el-menu-item index="1-4"><router-link to="/panduan">判断服务器</router-link></el-menu-item>
        </el-sub-menu></div>
        <div class="a">
        <el-sub-menu index="2">
          <template #title>
            <span><el-icon><Aim /></el-icon>问题</span>
          </template>
          
            <el-menu-item index="1-1"><router-link to="/wenti">问题列表</router-link></el-menu-item>
            <el-menu-item index="1-2"><router-link to="/zengjia">增加题目</router-link></el-menu-item>
            <el-menu-item index="1-3"><router-link to="/daoru">导入导出题目</router-link></el-menu-item>
        </el-sub-menu></div>
        <div class="a">
        <el-sub-menu index="3">
          <template #title>
            <span><el-icon><Trophy /></el-icon>比赛&练习</span>
          </template>
          
            <el-menu-item index="1-1"><router-link to="/bisai">比赛列表</router-link></el-menu-item>
            <el-menu-item index="1-2"><router-link to="/chuangjian">创建比赛</router-link></el-menu-item>
        </el-sub-menu></div>
        <div class="a">
        <el-sub-menu index="4">
          <template #title>
            <span><el-icon><Collection /></el-icon>课程</span>
          </template>
          
            <el-menu-item index="1-1"><router-link to="/kecheng">课程列表</router-link></el-menu-item>
            <el-menu-item index="1-2"><router-link to="/chuangjian2">创建课程</router-link></el-menu-item>
        </el-sub-menu></div>
      </el-menu>
    </el-col>
</el-aside>



      <el-container style="background-color:#EDECEC">

          <div class="b">
         <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
         <el-icon><Search /></el-icon>&nbsp;&nbsp;
            <el-icon><Share /></el-icon>&nbsp;&nbsp;
          <span>username</span> 
           <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px"
              ></el-icon><setting/><el-icon><ArrowDown /></el-icon>
           <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>logout</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header></div>
           
           
        <el-main>
            <div class="c">
                <router-view></router-view>
                
            </div>
            </el-main>


        <el-footer>
          <div class="d">
            <h5>Bulid Version:20210929bd</h5></div>
        </el-footer>

      </el-container>


    </el-container>
  </div>
</template>
<script>
import { Odometer,Menu,Aim,Trophy,Collection,Search,Share,ArrowDown} from '@element-plus/icons-vue'
export default{
data(){
    return{
           
    }
    },
    components:{
       Odometer,
       Menu,
       Aim,
       Trophy,
       Collection,
       Search,
       Share,
       ArrowDown
       
    }
}
</script>
<style scoped>
.a{
    background-color: rgb(255, 255, 255);
    width: 350px;
    height: 100%;
}
.b{
    background-color: #F9FAFC;
    margin-top: -60px;
    text-align: center;
}
.toolbar{
    margin-top: 30px;
}
.c{
    width: 100%;
    height: auto;
    background-color: #fff;
}
.d{
    width: 100%;
   
    height: 60px;
    font-size: 15px;
     line-height: 60px;
}
.e{
    margin-left: 70px;
}
.router-link-active{
  text-decoration: none;
  color: black;
}
a{
  text-decoration: none;
  color: black;
}

</style>